<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/7/9
  Time: 11:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="JS/jquery-1.8.3.js"></script>
    <script src="CSS/bootstrap.min.js"></script>
    <link rel="stylesheet" href="CSS/bootstrap.css">
</head>
<body>


<form role="form" action="PostTopicServlet" method="post">

    <div class="form-group">
        <label for="exampleInputEmail3">板块编号</label>
        <input type="text" readonly="readonly" class="form-control" name="bId" id="exampleInputEmail3"
               value="${requestScope.bId}" placeholder="请输入板块编号">
    </div>

    <div class="form-group">
        <label for="exampleInputEmail4">板块名称</label>
        <input type="text" readonly="readonly" class="form-control" name="bName" id="exampleInputEmail4"
               value="${requestScope.bName}" placeholder="请输入发贴标题">
    </div>
    <div class="form-group">
        <label for="exampleInputEmail1">发帖标题</label>
        <input type="text" class="form-control" name="title" id="exampleInputEmail1" placeholder="请输入发贴标题">
    </div>
    <label for="exampleInputEmail2">发帖内容</label>
    <textarea class="form-control" id="exampleInputEmail2" rows="3" name="context"
              placeholder="请输入内容,最多150字"></textarea>
    <button type="submit" class="btn btn-default">提交</button>
    ${requestScope.result}<span id="result"></span>
</form>


</body>

<script>
    $(function () {

        $("#exampleInputEmail2").keyup(function () {
            var $len = $("#exampleInputEmail2").val();
            var codlen = 150 - $len.length;
            if (codlen >= 0){
                $("#result").text("还剩:" + codlen + "字");
            }else {
                $("#result").text("字数已超上限!!");
                $("#result").css("color","red");
            }


            if ($len.length > 150) {
                $("#exampleInputEmail2").attr("readOnly", true);
            }
        });
    })
</script>

</html>
